<template>
  <view class="page">
    <!-- 顶部用户卡片 -->
    <view class="profile-card">
      <view class="card-header">
        <t-avatar
          :image="userInfo.avatar || defaultAvatar"
          size="64"
          class="avatar"
        />
        <view class="header-info">
          <view class="name-row">
            <text class="name">{{ userInfo.nickname || "未登录用户" }}</text>
            <t-tag theme="warning" variant="light" size="small">Lv1</t-tag>
          </view>
          <view class="sub-row">
            <t-icon name="verify" size="20" />
            <text class="vip-text">永久会员</text>
          </view>
        </view>
        <t-button variant="text" shape="square" @tap="goSettings">
          <t-icon name="more" size="20" />
        </t-button>
      </view>

      <view class="header-actions" v-if="!token">
        <t-button theme="warning" block @tap="wechatLogin"
          >微信一键登录</t-button
        >
      </view>
    </view>

    <!-- 功能列表 -->
    <t-cell-group>
      <t-cell
        v-for="item in menu"
        :key="item.key"
        :title="item.title"
        :description="item.desc"
        :hover="true"
        :arrow="true"
        @tap="onMenuTap(item)"
      >
        <template #leftIcon>
          <t-icon :name="item.icon" size="20" />
        </template>
        <template v-if="item.extra" #note>
          <text class="cell-note">{{ item.extra }}</text>
        </template>
      </t-cell>
    </t-cell-group>

    <!-- 底部分享按钮 -->
    <view class="share-wrap">
      <t-button theme="warning" block open-type="share">
        <t-icon name="share" size="20" />
        <text class="share-text">分享给朋友</text>
      </t-button>
      <text class="site-text">chenyi</text>
    </view>
  </view>
  <!-- 预留 tabbar 已由 pages.json 配置 -->
</template>

<script setup>
import { ref, reactive } from "vue";
import { onShow } from "@dcloudio/uni-app";
import { cloudQuickLogin, getUserProfile } from "../../services";
import defaultAvatar from "../../static/logo.png";
// 登录态与用户信息状态
const token = ref("");
const userInfo = reactive({ nickname: "", avatar: "" });

// 功能列表数据（图标基于 TDesign Icon 名称）
const menu = [
  { key: "downloads", title: "我的下载", icon: "download", desc: "" },
  { key: "history", title: "去水印历史", icon: "time", desc: "" },
  { key: "settings", title: "设置", icon: "setting", desc: "" },
];

/**
 * 页面显示：同步本地登录态与用户信息
 */
onShow(() => {
  token.value = uni.getStorageSync("token") || "";
  const info = uni.getStorageSync("userInfo") || {};
  userInfo.nickname = info.nickname || "";
  userInfo.avatar = info.avatar || "";
});

/**
 * 微信云开发快捷登录
 * - 调用云函数获取 openid 作为登录态
 * - 成功后获取并缓存用户资料
 */
function wechatLogin() {
  cloudQuickLogin()
    .then((openid) => {
      uni.setStorageSync("token", openid);
      token.value = openid;
      uni.showToast({ title: "登录成功", icon: "success" });
      fetchUserProfile();
    })
    .catch(() => {
      uni.showToast({ title: "登录失败", icon: "none" });
    });
}

/**
 * 获取微信用户资料并持久化
 */
function fetchUserProfile() {
  getUserProfile()
    .then((info) => {
      userInfo.nickname = info.nickname;
      userInfo.avatar = info.avatar;
      uni.setStorageSync("userInfo", info);
    })
    .catch(() => {});
}

/**
 * 进入设置页（示例：用于个性化配置）
 */
function goSettings() {
  uni.navigateTo({ url: "/pages/settings/index" });
}

/**
 * 列表项点击路由分发
 * - 根据 key 跳转到对应页面或执行操作
 */
function onMenuTap(item) {
  switch (item.key) {
    case "downloads":
      uni.navigateTo({ url: "/pages/downloads/index" });
      break;
    case "history":
      uni.navigateTo({ url: "/pages/history/index" });
      break;
    case "settings":
      goSettings();
      break;
    default:
      uni.showToast({ title: "功能开发中", icon: "none" });
      break;
  }
}
</script>

<style>
.page {
  padding: 24rpx;
}

/* 顶部用户卡片 */
.profile-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
}
.card-header {
  display: flex;
  align-items: center;
  gap: 24rpx;
}
.header-info {
  flex: 1;
}
.name-row {
  display: flex;
  align-items: center;
  gap: 12rpx;
}
.name {
  font-size: 32rpx;
  font-weight: 600;
  color: #1f1f1f;
}
.sub-row {
  display: flex;
  align-items: center;
  gap: 8rpx;
  color: #8c8c8c;
  margin-top: 6rpx;
}
.vip-text {
  font-size: 24rpx;
  color: #8c8c8c;
}
.header-actions {
  margin-top: 16rpx;
}

/* 头像尺寸修正，避免过大显示 */
.avatar {
  width: 128rpx;
  height: 128rpx;
}

/* 列表附加文案 */
.cell-note {
  color: #faad14;
  font-size: 24rpx;
}

/* 底部分享区 */
.share-wrap {
  padding: 24rpx 0;
}
.share-text {
  margin-left: 8rpx;
}
.site-text {
  display: block;
  text-align: center;
  color: #999;
  font-size: 24rpx;
  margin-top: 12rpx;
}
</style>
